import React from 'react'
import { TitleBar, Tabs, Link, NavContent } from '../../ui-components'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import * as reviewAction from '../../actions/review.action'
import cx from 'classnames'
import style from './style'

export default
@connect(({ review }) => ({ review }), dispatch => ({actions: bindActionCreators({...reviewAction}, dispatch)}))
class ReviewPeerr extends React.Component {

  init = {
    tabsIndex: 1
  }

  tabMap = ['/review/peer/pending', '/review/peer/done', '/review/peer/canceled']

  static contextTypes = {
    router: React.PropTypes.object
  }

  handleTab(index) {
    const { push } = this.context.router
    push(this.tabMap[index-1])

    this.setState({
      tabsIndex: index
    })
  }

  componentWillReceiveProps(props) {
    if (this.props.location.pathname != props.location.pathname) {
      this.setState({
        tabsIndex: this.tabMap.indexOf(props.location.pathname)+1
      })
    }
  }

  constructor(props) {
    super(props)
    const tabsIndex = this.tabMap.indexOf(props.location.pathname)+1
    this.state = {
      ...this.init,
      tabsIndex
    }
  }

  render() {
    return (
      <div className={style.root}>
        <TitleBar label="给同事的反馈"/>
        <Tabs
          top
          className={style.tabs}
          index={this.state.tabsIndex}
          onChange={::this.handleTab}
          tabs={[
            { label: '等待反馈'},
            { label: '已提交' },
            { label: '已取消' }
          ]}
        />
        { 
          React.Children.map(this.props.children, child => React.cloneElement(child, {
            ...this.props.actions,
            ...this.props,
            ...this.context
          })) 
        }
      </div>
    )
  }
}
